<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :lg="24" :xs="24" class="card-panel-col">
        <el-card
          shadow="always"
          class="page-header"
          :body-style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }"
        >
          <pan-thumb :image="avatar" class="panThumb" />
          <div class="header-title">
            <p>
              <span v-if="getTime == 0">早上好 {{ name }}，今天也是元气满满的一天~</span>
              <span v-if="getTime == 1"
                >下午好 {{ name }}，你一定有些累了，喝杯咖啡提提神吧~</span
              >
              <span v-if="getTime == 2"
                >晚上好 {{ name }}，给努力的自己点一杯美味的奶茶吧~</span
              >
            </p>
            <p class="header-subTitle">权限 ： {{ roleName }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :lg="4" :sm="12" :xs="24" class="card-panel-col">
        <el-card
          shadow="hover"
          style="text-align: center; cursor: pointer"
          @click.native.stop="openRightPanel"
        >
            <svg-icon icon-class="theme" class="svgIcon" style="color: rgb(105, 192, 255)" />
          <p>主题配置</p>
        </el-card>
      </el-col>
      <el-col :lg="4" :sm="12" :xs="24" class="card-panel-col">
        <el-card shadow="hover" style="text-align: center; cursor: pointer">
          <svg-icon icon-class="theme" class="svgIcon" style="color: rgb(105, 192, 255)" />
          <p>主题配置</p>
        </el-card>
      </el-col>
      <el-col :lg="4" :sm="12" :xs="24" class="card-panel-col">
        <el-card shadow="hover" style="text-align: center; cursor: pointer">
          <svg-icon icon-class="theme" class="svgIcon" style="color: rgb(105, 192, 255)" />
          <p>主题配置</p>
        </el-card>
      </el-col>
      <el-col :lg="4" :sm="12" :xs="24" class="card-panel-col">
        <el-card shadow="hover" style="text-align: center; cursor: pointer">
          <svg-icon icon-class="theme" class="svgIcon" style="color: rgb(105, 192, 255)" />
          <p>主题配置</p>
        </el-card>
      </el-col>
      <el-col :lg="4" :sm="12" :xs="24" class="card-panel-col">
        <el-card shadow="hover" style="text-align: center; cursor: pointer">
          <svg-icon icon-class="theme" class="svgIcon" style="color: rgb(105, 192, 255)" />
          <p>主题配置</p>
        </el-card>
      </el-col>
      <el-col :lg="4" :sm="12" :xs="24" class="card-panel-col">
        <el-card shadow="hover" style="text-align: center; cursor: pointer">
          <svg-icon icon-class="theme" class="svgIcon" style="color: rgb(105, 192, 255)" />
          <p>主题配置</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :lg="12" :xs="24" class="card-panel-col">
        <el-card shadow="always"> 总是显示 </el-card>
      </el-col>
      <el-col :lg="12" :xs="24" class="card-panel-col">
        <el-card shadow="always"> 总是显示 </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PanThumb from "@/components/PanThumb";
export default {
  name: "Dashboard",
  components: {
    PanThumb,
  },
  computed: {
    ...mapGetters(["name", "avatar", "roleName"]),
    getTime() {
      let date = new Date();
      if (date.getHours() >= 0 && date.getHours() < 12) {
        return 0;
      } else if (date.getHours() >= 12 && date.getHours() < 18) {
        return 1;
      } else {
        return 2;
      }
    },
  },
  methods: {
    openRightPanel() {
      this.$store.dispatch("app/openRightPanel")
    },
  },
};
</script>

<style lang="scss" scoped>
.card-panel-col {
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-bottom: 32px;
}
.panThumb {
  z-index: 100;
  height: 70px !important;
  width: 70px !important;
  border: 2px solid #eee;
  background-color: #eee;
  margin: auto;
  box-shadow: none !important;
  ::v-deep .pan-info {
    box-shadow: none !important;
  }
}
.header-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #3c4a54;
  flex: auto;
  margin-left: 20px;
}
.header-subTitle {
  font-size: 14px;
  color: #808695;
}
.svgIcon {
  font-size: 36px;
}
</style>
